<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>自我恋爱脑程度测试 - 星格</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#6C5CE7',
                        secondary: '#FD79A8',
                        rose: '#F43F5E',
                        dark: '#2D3748',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .lovebrain-bg { background-image: radial-gradient(circle, rgba(244, 63, 94, 0.06) 1px, transparent 1px); background-size: 20px 20px; }
            .fade-in { animation: fadeIn 0.5s ease-in; }
            @keyframes fadeIn { from { opacity: 0; transform: translateY(10px);} to { opacity: 1; transform: translateY(0);} }
        }
    </style>
</head>
<body class="bg-gray-50 text-dark min-h-screen flex flex-col">
    <main class="flex-1 pt-5 pb-24 px-4 relative">
        <div class="fixed inset-0 w-full h-full" style="background: linear-gradient(135deg, #FFE4E6 0%, #FDE1F2 50%, #E3F2FD 100%); z-index: -1;"></div>

        <div class="container mx-auto max-w-md relative z-10">
            <!-- 介绍 -->
            <div id="test-intro" class="mb-6">
                <div class="bg-white/90 backdrop-blur-sm rounded-2xl shadow-lg p-6 mb-6 border border-white/50 relative overflow-hidden">
                    <div class="absolute inset-0 lovebrain-bg opacity-40"></div>
                    <div class="relative z-10">
                        <div class="text-center mb-6">
                            <div class="w-16 h-16 rounded-full bg-gradient-to-br from-rose-100 to-pink-100 flex items-center justify-center mx-auto mb-4 shadow-md">
                                <i class="fa fa-heartbeat text-rose-500 text-2xl"></i>
                            </div>
                            <h2 class="text-xl font-bold text-gray-800 mb-2">自我恋爱脑程度测试</h2>
                            <p class="text-sm text-gray-500">12题 · 评估你在恋爱中的理性/感性平衡</p>
                        </div>
                        <div class="space-y-3 mb-5 text-sm text-gray-600">
                            <div class="flex items-start space-x-3"><i class="fa fa-check text-rose-500 mt-0.5"></i><p>从依恋、投入、界限、独立性等维度综合评估。</p></div>
                            <div class="flex items-start space-x-3"><i class="fa fa-clock-o text-rose-500 mt-0.5"></i><p>预计用时 6-8 分钟，诚实作答更准确。</p></div>
                        </div>
                        <button id="start-test" class="w-full bg-gradient-to-r from-rose-500 to-pink-500 text-white py-3 rounded-xl text-sm font-medium shadow-lg hover:shadow-xl transition-all duration-300">
                            <i class="fa fa-play mr-2"></i>开始测试
                        </button>
                    </div>
                </div>
            </div>

            <!-- 题目区 -->
            <div id="test-questions" class="hidden">
                <div class="bg-white rounded-xl shadow-sm p-4 mb-6">
                    <div class="flex justify-between text-sm mb-2">
                        <span>问题 <span id="current-question">1</span>/12</span>
                        <span id="progress-percent">8%</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                        <div id="progress-bar" class="bg-rose-500 h-2 rounded-full" style="width: 8%"></div>
                    </div>
                </div>

                <div id="question-container" class="bg-white rounded-xl shadow-sm p-5 mb-6"></div>

                <div class="flex justify-between">
                    <button id="prev-question" class="w-20 bg-white border border-gray-300 text-gray-700 py-2.5 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed" disabled>上一题</button>
                    <button id="next-question" class="w-20 bg-rose-500 text-white py-2.5 rounded-lg text-sm font-medium hover:bg-rose-600 transition-colors">下一题</button>
                </div>
            </div>

            <!-- 结果区 -->
            <div id="test-result" class="hidden space-y-6">
                <div class="bg-white rounded-xl shadow-sm p-5 relative overflow-hidden">
                    <div class="absolute inset-0 lovebrain-bg opacity-50"></div>
                    <div class="relative z-10">
                        <div class="text-center mb-6">
                            <div id="result-icon" class="w-16 h-16 rounded-full mx-auto mb-3 flex items-center justify-center text-white bg-rose-500">
                                <i class="fa fa-heartbeat text-xl"></i>
                            </div>
                            <h2 class="text-xl font-bold text-rose-600 mb-1" id="result-title">恋爱脑程度：中等</h2>
                            <p class="text-sm text-gray-500" id="result-tagline">你在爱与理性间保持一定平衡</p>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-4 mb-4">
                            <h3 class="text-sm font-medium mb-2">综合分析</h3>
                            <p class="text-sm text-gray-600" id="result-overview"></p>
                        </div>
                        <button id="retake-test" class="w-full bg-rose-500/10 text-rose-600 py-2.5 rounded-lg text-sm font-medium hover:bg-rose-500/20 transition-colors"><i class="fa fa-refresh mr-1"></i> 重新测试</button>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer class="fixed bottom-0 left-0 right-0 bg-white shadow-[0_-2px_10px_rgba(0,0,0,0.05)] z-30">
        <div class="container mx-auto">
            <div class="flex justify-around">
                <button class="tab-button flex flex-col items-center justify-center py-3 px-4 w-full" data-tab="home-tab"><i class="fa fa-home text-lg"></i><span class="text-xs mt-1">首页</span></button>
                <button class="tab-button tab-active flex flex-col items-center justify-center py-3 px-4 w-full" data-tab="test-tab"><i class="fa fa-list-alt text-lg"></i><span class="text-xs mt-1">测试</span></button>
                <button class="tab-button flex flex-col items-center justify-center py-3 px-4 w-full" data-tab="fortune-tab"><i class="fa fa-moon-o text-lg"></i><span class="text-xs mt-1">运势</span></button>
                <button class="tab-button flex flex-col items-center justify-center py-3 px-4 w-full" data-tab="profile-tab"><i class="fa fa-user-o text-lg"></i><span class="text-xs mt-1">我的</span></button>
            </div>
        </div>
    </footer>

    <script>
        const questions = [
            { id: 1,  text: '在恋爱中，你是否容易把对方放在一切之上？', options: ['A. 经常如此','B. 看情况','C. 基本不会'] },
            { id: 2,  text: '当对方没有及时回复消息时，你通常会：', options: ['A. 不断发消息/情绪波动','B. 稍感不安但能等待','C. 理性看待，给对方空间'] },
            { id: 3,  text: '计划被伴侣临时更改时，你的反应：', options: ['A. 很受影响、情绪低落','B. 有点失落但能调整','C. 理解并迅速切换安排'] },
            { id: 4,  text: '你是否经常牺牲自己的需求去迎合对方？', options: ['A. 经常','B. 偶尔','C. 很少/不会'] },
            { id: 5,  text: '朋友提醒你要理性对待关系时，你会：', options: ['A. 不愿听劝','B. 会听但难做到','C. 能理性吸收与权衡'] },
            { id: 6,  text: '遇到矛盾时，你更倾向于：', options: ['A. 急于和好、忽视问题','B. 需要冷静一阵','C. 面对问题并沟通解决'] },
            { id: 7,  text: '你会因为恋爱而忽视学业/工作/健康吗？', options: ['A. 经常','B. 偶尔','C. 基本不会'] },
            { id: 8,  text: '你对伴侣的依赖程度：', options: ['A. 很强，没有他/她不行','B. 中等','C. 独立，彼此支持即可'] },
            { id: 9,  text: '恋爱中你的安全感主要来自：', options: ['A. 对方的回应与陪伴','B. 双方的互动质量','C. 自己的稳定与边界'] },
            { id:10,  text: '你是否频繁查对方动态/行踪？', options: ['A. 是','B. 偶尔','C. 基本不会'] },
            { id:11,  text: '你做重要决定时是否会被恋情强烈左右？', options: ['A. 很多时候会','B. 视情况而定','C. 基本不会'] },
            { id:12,  text: '当恋爱与自我成长冲突时，你会：', options: ['A. 选择恋爱优先','B. 寻找平衡','C. 优先长期成长'] },
        ];

        const userAnswers = {};
        let currentIndex = 0;

        const testIntro = document.getElementById('test-intro');
        const testQuestions = document.getElementById('test-questions');
        const testResult = document.getElementById('test-result');
        const startBtn = document.getElementById('start-test');
        const prevBtn = document.getElementById('prev-question');
        const nextBtn = document.getElementById('next-question');
        const questionContainer = document.getElementById('question-container');
        const currentQuestionEl = document.getElementById('current-question');
        const progressBarEl = document.getElementById('progress-bar');
        const progressPercentEl = document.getElementById('progress-percent');

        startBtn.addEventListener('click', () => {
            testIntro.classList.add('hidden');
            testQuestions.classList.remove('hidden');
            renderQuestion(currentIndex);
            updateNav();
            updateProgress();
            window.scrollTo(0, 0);
        });

        prevBtn.addEventListener('click', () => {
            if (currentIndex > 0) {
                currentIndex--;
                renderQuestion(currentIndex);
                updateNav();
                updateProgress();
                questionContainer.scrollIntoView({ behavior: 'smooth' });
            }
        });

        nextBtn.addEventListener('click', () => {
            const q = questions[currentIndex];
            const selected = document.querySelector(`input[name="q-${q.id}"]:checked`);
            if (!selected) { alert('请选择一个答案'); return; }
            userAnswers[q.id] = selected.value;
            if (currentIndex < questions.length - 1) {
                currentIndex++;
                renderQuestion(currentIndex);
                updateNav();
                updateProgress();
                questionContainer.scrollIntoView({ behavior: 'smooth' });
            } else {
                showResult();
            }
        });

        function renderQuestion(index) {
            const q = questions[index];
            questionContainer.innerHTML = '';
            const title = document.createElement('h3');
            title.className = 'text-base font-medium mb-4';
            title.textContent = q.text;
            questionContainer.appendChild(title);
            const options = document.createElement('div');
            options.className = 'space-y-3';
            q.options.forEach((opt, i) => {
                const label = document.createElement('label');
                label.className = 'block';
                const input = document.createElement('input');
                input.type = 'radio';
                input.name = `q-${q.id}`;
                input.value = ['A','B','C'][i];
                input.className = 'hidden peer';
                if (userAnswers[q.id] === input.value) input.checked = true;
                const wrap = document.createElement('div');
                wrap.className = 'p-3 border border-gray-200 rounded-lg peer-checked:border-rose-500 peer-checked:bg-rose-50 hover:bg-gray-50 transition-colors cursor-pointer';
                const row = document.createElement('div');
                row.className = 'flex items-center';
                const indicator = document.createElement('div');
                indicator.className = 'w-5 h-5 rounded-full border border-gray-300 flex items-center justify-center mr-3 peer-checked:border-rose-500';
                const dot = document.createElement('div');
                dot.className = 'w-3 h-3 rounded-full bg-rose-500 hidden peer-checked:block';
                const text = document.createElement('span');
                text.textContent = opt;
                indicator.appendChild(dot); row.appendChild(indicator); row.appendChild(text);
                wrap.appendChild(row); label.appendChild(input); label.appendChild(wrap); options.appendChild(label);
            });
            questionContainer.appendChild(options);
            currentQuestionEl.textContent = index + 1;
            questionContainer.classList.add('fade-in');
            setTimeout(() => questionContainer.classList.remove('fade-in'), 400);
        }

        function updateNav() {
            prevBtn.disabled = currentIndex === 0;
            nextBtn.textContent = currentIndex === questions.length - 1 ? '查看结果' : '下一题';
        }

        function updateProgress() {
            const percent = Math.round(((currentIndex + 1) / questions.length) * 100);
            progressBarEl.style.width = `${percent}%`;
            progressPercentEl.textContent = `${percent}%`;
        }

        function showResult() {
            // 评分规则：A=2, B=1, C=0，分数越高越恋爱脑
            let score = 0;
            questions.forEach(q => {
                const v = userAnswers[q.id] || 'C';
                score += v === 'A' ? 2 : v === 'B' ? 1 : 0;
            });
            const max = questions.length * 2;
            const ratio = score / max; // 0-1
            let level = { title: '恋爱脑程度：中等', tagline: '你在爱与理性间保持一定平衡', color: 'rose', overview: '' };
            if (ratio >= 0.75) level = { title: '恋爱脑程度：偏高', tagline: '投入感很强，注意边界与自我照顾', color: 'rose', overview: '你对关系极为重视，容易牺牲自我以维护亲密，请练习设定界限与情绪自稳。' };
            else if (ratio <= 0.35) level = { title: '恋爱脑程度：偏低', tagline: '理性独立，建议适度表达与投入', color: 'rose', overview: '你较为理性与自持，关系稳定但需注意情感表达与共情，以增强亲密联结。' };
            else level.overview = '你能在情感与理性间找到折中点，继续保持边界与沟通。';

            document.getElementById('result-title').textContent = level.title;
            document.getElementById('result-tagline').textContent = level.tagline;
            document.getElementById('result-overview').textContent = level.overview;

            testQuestions.classList.add('hidden');
            testResult.classList.remove('hidden');
            window.scrollTo(0, 0);
        }

        document.getElementById('retake-test').addEventListener('click', () => {
            currentIndex = 0;
            Object.keys(userAnswers).forEach(k => delete userAnswers[k]);
            testResult.classList.add('hidden');
            testQuestions.classList.remove('hidden');
            renderQuestion(currentIndex);
            updateNav();
            updateProgress();
        });

        // 底部Tab跳转
        document.querySelectorAll('.tab-button').forEach(btn => {
            btn.addEventListener('click', function(){
                document.querySelectorAll('.tab-button').forEach(b => b.classList.remove('tab-active'));
                this.classList.add('tab-active');
                const tabId = this.getAttribute('data-tab');
                if (tabId !== 'test-tab') window.location.href = `index.html#${tabId}`;
            });
        });
    </script>
</body>
</html>


